<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">角色名称:</p>
			</el-col>
			<el-col :span="4">

				<el-input size="small"
				          v-model="resRoleValue"
				          placeholder="请输入"
				          style="width:120!important"></el-input>

			</el-col>
			<el-col :span="4">
				<el-button type="primary"
				           size="small"
				           v-on:click='resRoleQuery'>查询</el-button>
			</el-col>
			<el-col :span="15"
			        style="text-align: right;margin-left:-10px">
				<el-button type="primary"
				           size="small"
				           v-on:click='resRoleAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="resRoleEdit()">编辑</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="startResRole()">启用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="stopResRole()">停用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="editRes()">分配资源</el-button>

			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">

				<el-table :data="tableData.dataList"
				          stripe
				          @selection-change="handleSelectionChange"
				          border>
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>

					<el-table-column prop="rName"
					                 label="角色名称"
					                 width="180">
					</el-table-column>
					<el-table-column prop="isManger"
					                 label="是否管理员"
					                 :formatter="mangerCov"
					                 width="120">
					</el-table-column>
					<el-table-column prop="rDesc"
					                 label="角色描述"
					                 width="150">
					</el-table-column>
					<el-table-column prop="oId"
					                 label="应用部门"
					                 :formatter="deptCov"
					                 width="300">
					</el-table-column>
					<el-table-column prop="hasChild"
					                 label="应用下级"
					                 :formatter="hasChildCov"
					                 width="120">
					</el-table-column>
					<el-table-column prop="rStatus"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="120">

					</el-table-column>
					<!--<el-table-column label="操作"
				                                     fixed="right"
				                                     width="260">

				                                                                                                                                                            	作者：吴彦昭   基础配置中心-资源角色管理 界面
				                                                                                                                                                            	时间：2017-03-23 10:40
				                                                                                                                                                            	描述：图标整理 更新界                                                                                                                                         -->
					<!--<template scope="scope">
				                            <el-tooltip class="item"
				                                        effect="light"
				                                        content="编辑"
				                                        placement="top">
				                                <el-button type="primary"
				                                           size="mini"
				                                           class="iconfont icon-dingdan"
				                                           @click.native.prevent="resRoleEdit(scope.$index)"></el-button>
				                            </el-tooltip>
				                            <el-tooltip class="item"
				                                        effect="light"
				                                        content="启用"
				                                        placement="top">
				                                <el-button type="info"
				                                           size="mini"
				                                           class="iconfont icon-kaishi"
				                                           @click.native.prevent="startResRole(scope.$index)"></el-button>
				                            </el-tooltip>
				                            <el-tooltip class="item"
				                                        effect="light"
				                                        content="停用"
				                                        placement="top">
				                                <el-button type="warning"
				                                           size="mini"
				                                           class="iconfont icon-stop"
				                                           @click.native.prevent="stopResRole(scope.$index)"></el-button>
				                            </el-tooltip>
				                            <el-tooltip class="item"
				                                        effect="light"
				                                        content="分配资源"
				                                        placement="top">
				                                <el-button type="danger"
				                                           size="mini"
				                                           class="iconfont icon-bianji"
				                                           @click.native.prevent="editRes(scope.$index)"></el-button>
				                            </el-tooltip>
				                        </template>
				                    </el-table-column>-->-->
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--
				                                                                                                                                                                    	作者：王恒腾
				                                                                                                                                                                    	时间：2017-02-06
				                                                                                                                                                                    	描述：新增与编辑界面↓↓↓
				                                                                                                                                                                    -->
		<el-dialog title="角色详情"
		           v-model="resRoleFormShow">
			<el-form :model="resRoleFormData"
			         ref="resRoleForm"
			         :rules="resRoleRule"
			         label-width="100px">
				<el-col :span="24">
					<el-form-item label="角色名称:"
					              prop="rName"
					              required>
						<el-input size="small"
						          v-model="resRoleFormData.rName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="应用部门:"
					              prop="oName">
						<el-input size="small"
						          readonly
						          v-model="resRoleFormData.oName"
						          icon="more"
						          @click="openDeptTree"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否管理员:"
					              prop="isManger">
						<el-select size="small"
						           v-model="resRoleFormData.isManger"
						           placeholder="请选择">
							<el-option label="是"
							           value="1">

							</el-option>
							<el-option label="否"
							           value="0"
							           selected>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="应用下级:"
					              prop="hasChild">
						<el-select size="small"
						           v-model="resRoleFormData.hasChild"
						           placeholder="请选择">
							<el-option label="是"
							           value="1">
							</el-option>
							<el-option label="否"
							           value="0">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="显示顺序:"
					              prop="rOrder">
						<el-input-number size="small"
						                 v-model="resRoleFormData.rOrder"
						                 :min="0"
						                 :max="999"></el-input-number>
					</el-form-item>
				</el-col>
				<el-form-item label="备注:"
				              prop="rDesc">
					<el-input size="small"
					          type="textarea"
					          :rows="2"
					          placeholder="请输入内容"
					          v-model="resRoleFormData.rDesc">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="resRoleFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveRole">提 交</el-button>
			</div>
		</el-dialog>
		<!-- 弹出部门选择树-->
		<el-dialog title="选择公司"
		           v-model="deptShow"
		           size="small">
			<el-tree :data="deptTreeData"
			         :highlight-current=true
			         :props="defaultProps"
			         accordion
			         @node-click="handleNodeClick"></el-tree>
			<div slot="footer"
			     class="dialog-footer">
				<el-button type="primary"
				           @click="deptShow = false">关闭</el-button>
			</div>
		</el-dialog>
		<!-- 弹出资源选择树-->
		<el-dialog title="选择资源"
		           v-model="resTreeShow"
		           size="small">
			<el-tree :data="resTreeData"
			         ref="resTree"
			         show-checkbox
			         node-key="id"
			         check-strictly
			         :highlight-current=true
			         :props="resTreepros"
			         accordion
			         :default-checked-keys="checkedResKeys"
			         :filter-node-method="filterNode"></el-tree>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="resTreeShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveRes">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//页码数
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//列表查询条件
			resRoleValue: '',
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//字典转换值
			deptConvertData: {},
			//创建编辑表单
			resRoleFormShow: false,
			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],
			//表单初始值
			emptyData: {
				id:'',
				rName: '',
				oId: '',
				oName: '',
				hasChild: '0',
				rOrder: '',
				rDesc: '',
				rStatus: '1',
				isManger: '0',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''
			},
			//表单数据
			resRoleFormData: {
				id:'',
				rName: '',
				oId: '',
				hasChild: '0',
				oName: '',
				rOrder: '',
				rDesc: '',
				rStatus: '1',
				isManger: '0',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''
			},
			//校验规则
			resRoleRule: {
				rName: [{
					required: true,
					message: '请输入角色名称',
					trigger: 'blur'
				}],
				oName: [{
					required: true,
					message: '请输选择部门',
					trigger: 'blur'
				}],

			},
			//树形图相关
			regions: [],
			props: {
				label: 'resName',
				children: 'resName'
			},
			// 左侧树形菜单
			leftTreeData: [],
			// 树选中高亮
			resTreepros: {
				label: 'resName',
				children: 'child'
			},
			count: 1,
			//部门树
			defaultProps: {
				children: 'child',
				label: 'oName'
			},

			deptShow: false,
			//树型数据
			deptTreeData: [],
			resTreeData: [],
			resTreeShow: false,

			//默认选择中
			checkedResKeys: [],
			//当前角色 ID
			curRoleId: '',
		}
	},

	methods: {
		/*------------------树形图相关方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓----------------------------------------------*/
		handleNodeClick(data) {
			this.$data.resRoleFormData.oName = data.oName;
			this.$data.resRoleFormData.oId = data.id;
		},

		/*------------------树形图相关方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑----------------------------------------------*/
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		reminderDelte: function () {
			debugger;
			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].id)
			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//查询
		resRoleQuery: function () {
			//debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/role/page', //url
				params: { //发送的参数
					searchValue: this.$data.resRoleValue, //查询条件
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {
				//debugger;
				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
				/*if(this.$data.list.dataList.length > 0) {
					if(this.$data.dictGroup == '' || this.$data.dictGroup == null) {
						this.$data.dictGroup = this.$data.group.dataList[0].g_code;
						this.$data.dictGroupName = this.$data.group.dataList[0].gName;
					}
					//this.dictQuery();
				}*/
			}, function (error) {
				// error
			})
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		},
		//新增资源角色
		resRoleAdd: function () {
			//清空数据
			this.$data.resRoleFormData = Object.assign(this.$data.resRoleFormData, this.$data.emptyData);
			this.$data.resRoleFormShow = true;
		},
		//编辑角色
		resRoleEdit: function () {
			if (this.$data.multipleSelection.length == 1) {
				//获取角色
				var resRoleData = this.$data.multipleSelection[0].id;
				this.$data.resRoleFormData = Object.assign(this.$data.resRoleFormData, this.$data.emptyData);

				this.$http.get(this.API_ROOT + '/rbac/role/infoRole', {
					params: {
						id: resRoleData
					}
				}).then((response) => {
					// success callback
					debugger;
					if (response.data.success) {
						this.$data.resRoleFormData = Object.assign(this.$data.resRoleFormData, response.data.data);
						this.$data.resRoleFormData.oName = this.$data.deptConvertData[this.$data.resRoleFormData.oId];
						this.$data.resRoleFormShow = true;
					} else {
						this.$message.error(response.data.msg);
					}
				}, (response) => {
					// error callback
				});

			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//启用角色
		startResRole: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				//debugger;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/role/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					if(resp.data.success){
					this.$message(resp.data.msg);
					this.resRoleQuery();
					}else{
						this.$message.error(resp.data.msg);
					}
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}


		},
		//停用角色
		stopResRole: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/role/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					if(resp.data.success){
					this.$message(resp.data.msg);
					this.resRoleQuery();
					}else{
						this.$message.error(resp.data.msg);
					}
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//打开部门
		openDeptTree: function (e) {

			this.$data.deptShow = true;

		},
		//查询资源
		queryResTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/rbac/res/userResTree', {

			}).then((response) => {
				this.$data.resTreeData = response.data.dataList;
			}, (response) => { });
		},
		//查询已分配的资源
		queryCheckedRes: function (roleId) {
			this.$data.checkedResKeys = [];
			//
			//checkedResKeys
			//获取资源树
			this.$http.get(this.API_ROOT + '/rbac/role/res', {
				params: {
					id: roleId
				}
			}).then((response) => {
				if (!response.data.success) {
					this.$message(response.data.msg);
					return;
				}
				this.$data.checkedResKeys = response.data.dataList;
				this.$refs.resTree.setCheckedKeys(response.data.dataList);
			}, (response) => { });
		},
		//分配资源
		editRes: function () {
			if (this.$data.multipleSelection.length == 1) {
                
				var data = this.$data.multipleSelection[0];
				var resRoleData = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/rbac/role/infoRole', {
					params: {
						id: resRoleData
					}
				}).then((response) => {
					// success callback
					debugger;
					if (response.data.success) {
						this.$data.currentRoleId = data.id;
				        this.$data.checkedResKey = [];
				        this.queryResTree();
				        this.queryCheckedRes(data.id);
				        this.$data.currentRoleId = data.id;
				        this.$data.resTreeShow = true;
					} else {
						this.$message.error(response.data.msg);
					}
				}, (response) => {
					// error callback
				});
				
			} else {
				this.$message.error("请选择一条数据")
			}



		},

		//状态转换
		statusCov: function (row, column) {
			return row.rStatus == "1" ? '已启用' : '已停用';
		},
		//状态转换
		mangerCov: function (row, column) {
			return row.isManger == "1" ? '是' : '否';
		},
		hasChildCov: function (row, column) {
			return row.hasChild == "1" ? '是' : '否';
		},
		deptCov: function (row, column) {
			return this.$data.deptConvertData[row.oId];
		},
		saveRole: function () {
			this.$refs.resRoleForm.validate(function (valid) {
				if (valid) {

					this.$http.post(this.API_ROOT + '/rbac/role/save', this.$data.resRoleFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.resRoleQuery(this.$data.curTreeDeptId);
								this.$data.resRoleFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//保存资源
		saveRes: function () {
			var checkNodes = this.$refs.resTree.getCheckedKeys();
			var data = {
				data: JSON.stringify(checkNodes),
			}
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/rbac/role/saveRes',
				body: checkNodes,
				params: {
					id: this.$data.currentRoleId,
				}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				if (resp.data.success) {
					this.$data.resTreeShow = false;
				}
			}, function (error) {
				// error
			})
		},
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.resName.indexOf(value) !== -1;
		},
		queryDeptCovert: function () {

			this.$http.get(this.API_ROOT + '/rbac/dept/convert', {
				params: {
					root: "0",
					type: ""
				}
			}).then((response) => {

				this.$data.deptConvertData = response.data;

			}, (response) => { });
		}
	},
	//表单创建时执行
	created: function () {
		//列表查询
		this.resRoleQuery();
		// 加载树

		//获取部门资源树
		this.$http.get(this.API_ROOT + '/rbac/dept/tree', {
			params: {
				root: window.localStorage.getItem("companyId"),
				type: "1",
			}
		}).then((response) => {
			this.$data.deptTreeData = response.data.dataList;

		}, (response) => { });

		//查询部门转换
		this.queryDeptCovert();
		//查询资源树
		this.queryResTree();
	}
}
</script>
<style>
/*应用部门 ...改成黑色*/

.el-input__icon {
	color: #000;
}

.el-table .info-row {
	height: 10px !important;
}

.item {
	width: 30px;
}

.el-form-item {
	clear: both;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
	display: inline;
}

.el-table {
	height: 100%;
	width: 100%;
}
</style>